<template>
  <div>
    <van-swipe :autoplay="2000" class="van-swipe">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" :class="[isFull ? 'img' : 'normal']" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3" square>
      <van-grid-item
        :to="'/home/' + item.url"
        v-for="(item, i) in menu"
        :key="i"
      >
        <div slot="text" class="text">
          <van-image round :src="item.img" />
          <span>{{ item.txt }}</span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  props: ["images", "menu", "isFull"],
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe {
  text-align: center;
}
.img {
  width: 100%;
  height: 100%;
}
.normal {
  width: 200px;
  height: 100%;
}
.van-grid-item__content--center p {
  padding: 0;
  margin-bottom: 5px;
}
.van-swipe_track .van-swipe-item {
  margin-bottom: 10px;
}
.van-hairline--top::after {
  border: none;
}
.van-image {
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.text {
  text-align: center;
}
.van-swipe {
  height: 200px;
}
.van-grid {
  margin-top: 20px;
}
span {
  font-size: 14px;
}
</style>